<template>
  <div class="advertising">
    <div class="advertising-carousel" v-if="banner.length">
      <el-carousel height="490px" style="--el-carousel-indicator-width:8px;--el-carousel-indicator-height:8px;">
        <el-carousel-item v-for="item in banner" :key="item.id">
          <banner-image :item="item"></banner-image>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="advertising-shop" v-if="shopOutAd || shopInnerAd">
      <div class="advertising-shop1" v-if="shopOutAd">
        <banner-image :item="shopOutAd"></banner-image>
      </div>
      <div class="advertising-shop1" v-if="shopInnerAd" style="margin-top: 10px;">
        <banner-image :item="shopInnerAd"></banner-image>
      </div>
    </div>
    <div class="advertising-ad" v-if="preSaleAd">
      <banner-image :item="preSaleAd"></banner-image>
    </div>
    <div class="advertising-ad" v-if="distributionAd" style="margin-left: 10px;">
      <banner-image :item="distributionAd"></banner-image>
    </div>
  </div>
</template>

<script setup name="IndexAdvertising">
import { appIndexGetAdsGet } from '@/api/banner'
import bannerImage from './bannerImage.vue'
const preSaleAd = ref('')
const distributionAd = ref('')
const shopOutAd = ref('')
const shopInnerAd = ref('')
const banner = ref([])
const sort = (a, b) => a.sort - b.sort;
const typeURIMap = {
  '5': '/distribution',
  '6': '/pre_sale',
  '7': '/shop/2',
  '8': '/shop/1'
}
appIndexGetAdsGet().then((res) => {
  if (res.data && Array.isArray(res.data)) {
    res.data.forEach(it => {
      if (typeURIMap[it.type]) {
        it.url = typeURIMap[it.type]
      }
    })
    shopOutAd.value = res.data.filter(it => it.type === '8').sort(sort)[0] || ''
    shopInnerAd.value = res.data.filter(it => it.type === '7').sort(sort)[0] || ''
    preSaleAd.value = res.data.filter(it => it.type === '6').sort(sort)[0] || ''
    distributionAd.value = res.data.filter(it => it.type === '5').sort(sort)[0] || ''
    banner.value = res.data.filter(it => it.slider === 'Y').sort(sort)
  }
}).catch((err) => {
  console.log(err)
});
</script>

<style lang="scss" scoped>
.advertising {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 22px;

  :deep(.advertising-carousel) {
    width: 778px;
    height: 490px;
    background-color: #000;

    .el-carousel__button {
      border-radius: 50%;
    }
  }

  &-shop {
    width: 247px;
    margin-left: 9px;
    padding-top: 10px;
    box-sizing: border-box;

    &1 {
      width: 247px;
      height: 234px;
      box-sizing: border-box;
      background-color: #000;
    }
  }

  &-ad {
    width: 512px;
    height: 210px;
    margin-top: 10px;
    background-color: #000;
  }
}
</style>